<!doctype>
<html>
<head>
	<title>jsPDF</title>
	<style type="text/css">
		* { padding: 0; margin: 0; }
		body {
			padding: 30px;
			font-family: Arial, Helvetica, sans-serif;
		}
		h1 {
			margin-bottom: 1em;
			border-bottom: 1px solid #ccc;
		}
		
		h2 {
			margin-bottom: 1em;
			border-bottom: 1px solid #ccc;
		}
		
		pre {
			border: 1px dotted #ccc;
			background: #f7f7f7;
			padding: 10px;
			margin-bottom: 1em;
		}
        
        h1 {
            margin-bottom: 0.7em;
        }
        
        h2 {
            margin-top: 1em;
        }
	</style>
	<script type="text/javascript" src="../libs/base64.js"></script>
	<script type="text/javascript" src="../libs/sprintf.js"></script>
	<script type="text/javascript" src="../jspdf.js"></script>
</head>

<body>

<h1>jsPDF Demos</h1>

<p>Examples for using jsPDF with Data URIs below. Go <a href="http://jspdf.googlecode.com/">back to project homepage</a>.</p>

<h2>Simple Two-page Text Document</h2>
<pre>var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'Do you like that?');

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo1()">Run Code</a>

<h2>Different font sizes</h2>
<pre>var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');	

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo2()">Run Code</a>


<h2>Adding metadata</h2>
<pre>var doc = new jsPDF();
doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');

// Optional - set properties on the document
doc.setProperties({
	title: 'Title',
	subject: 'This is the subject',		
	author: 'James Hall',
	keywords: 'generated, javascript, web 2.0, ajax',
	creator: 'MEEE'
});

// Output as Data URI
doc.output('datauri');</pre>
<a href="javascript:demo3()">Run Code</a>


<h2>Example of user input</h2>
<pre>var name = prompt('What is your name?');
var multiplier = prompt('Enter a number:');
multiplier = parseInt(multiplier);

var doc = new jsPDF();
doc.setFontSize(22);	
doc.text(20, 20, 'Questions');
doc.setFontSize(16);
doc.text(20, 30, 'This belongs to: ' + name);

for(var i = 1; i <= 12; i ++) {
	doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');
}

doc.addPage();
doc.setFontSize(22);
doc.text(20, 20, 'Answers');
doc.setFontSize(16);

for(var i = 1; i <= 12; i ++) {
	doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
}	
doc.output('datauri');</pre>
<a href="javascript:demo4()">Run Code</a>



<script type="text/javascript">

function demo1() {
	var doc = new jsPDF();
	doc.text(20, 20, 'Hello world!');
	doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
	doc.addPage();
	doc.text(20, 20, 'Do you like that?');
	
	// Output as Data URI
	doc.output('datauri');
}

function demo2() {
	var doc = new jsPDF();
	doc.setFontSize(22);
	doc.text(20, 20, 'This is a title');
	
	doc.setFontSize(16);
	doc.text(20, 30, 'This is some normal sized text underneath.');	
	
	// Output as Data URI
	doc.output('datauri');
}

function demo3() {
	var doc = new jsPDF();
	doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');
	
	// Optional - set properties on the document
	doc.setProperties({
		title: 'Title',
		subject: 'This is the subject',		
		author: 'James Hall',
		keywords: 'generated, javascript, web 2.0, ajax',
		creator: 'MEEE'
	});
	
	// Output as Data URI
	doc.output('datauri');
}

function demo4() {	
	var name = prompt('What is your name?');
	var multiplier = prompt('Enter a number:');
	multiplier = parseInt(multiplier);

	var doc = new jsPDF();
	doc.setFontSize(22);	
	doc.text(20, 20, 'Questions');
	doc.setFontSize(16);
	doc.text(20, 30, 'This belongs to: ' + name);
	
	for(var i = 1; i <= 12; i ++) {
		doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');
	}
	
	doc.addPage();
	doc.setFontSize(22);
	doc.text(20, 20, 'Answers');
	doc.setFontSize(16);
	
	for(var i = 1; i <= 12; i ++) {
		doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
	}	
	doc.output('datauri');
	
}

</script>


<script type="text/javascript">
// Google Analytics

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-2746979-4");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>